<template>
  <div class="app-container">
    <el-table
      :data="list"
      v-loading.body="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="题目名称">
        <template slot-scope="scope">
        {{scope.row.question}}
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == 1" type="success">单选题</el-tag>
          <el-tag v-else-if="scope.row.type == 2" type="danger">判断题</el-tag>
          <el-tag v-else-if="scope.row.type == 3" type="warm">多选题</el-tag>
          <el-tag v-else-if="scope.row.type == 4" type="primary">简答题</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="选项"  >
        <template slot-scope="scope">
          <el-radio  :label="scope.row.answer1">{{scope.row.answer1}}</el-radio>
          <el-radio  :label="scope.row.answer2">{{scope.row.answer2}}</el-radio>
          <el-radio  :label="scope.row.answer3">{{scope.row.answer3}}</el-radio>
          <el-radio  :label="scope.row.answer4">{{scope.row.answer4}}</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="正确答案"  >
        <template slot-scope="scope">
          {{scope.row.realanswer}}
        </template>
      </el-table-column>
      <el-table-column label="分值"  >
        <template slot-scope="scope">
          {{scope.row.score}}
        </template>
      </el-table-column>
      <el-table-column label="状态"  >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="success">可用</el-tag>
          <el-tag v-else type="danger">不可用</el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        align="center"-->
<!--        prop="created_at"-->
<!--        label="操作"-->
<!--        width="200"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="primary" size="mini">保存</el-button>-->
<!--          <el-button v-if="scope.row.status == 0" type="danger" size="mini">关闭使用</el-button>-->
<!--          <el-button v-else type="success" size="mini">开放使用</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-pagination
      class="pager"
      background
      layout="prev, pager, next"
      :current-page="listQuery.currentpage"
      :page-size="listQuery.pagesize"
      @current-change="fetchData"
      :total="listQuery.total">
    </el-pagination>
  </div>
</template>

<script>
import { getQuestionList } from "@/api/admin";

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      listQuery:{
        currentpage:1,
        pagesize:20,
        name:"",
        total:0,
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData(e) {
      if(e != undefined) this.listQuery.currentpage = e;
      this.listLoading = true;
      getQuestionList(this.listQuery).then((response) => {
        console.log("get list success")
        this.list = response.info;
        this.listQuery.currentpage = response.currentpage;
        this.listQuery.total = response.total;
        this.listQuery.totalpage = response.totalpage;
        this.listLoading = false;
      }).catch(err=>{
        this.listLoading = false;
      })
    },
    disable:function(e){
      console.log(e);
    }
  },
};
</script>
<style>
.pager{
  margin: 30px;
  float: right;
}
</style>
